<template>
  <div class="contaienr">
    <van-tabs v-model="active" class="mb10" @click="onClick">
      <van-tab :title="item.name" v-for="(item,index) in tabs" :key="index" />
    </van-tabs>
    <van-list v-model="loading" :finished="finished" :finished-text="finishedTxt" @load="onListLoad">
      <div class="list-item" v-for="item in list" :key="item.id">
        <van-panel class="panel" desc="查看订单" :title="'订单编号：'+item[0].orderSerialNumber" :status="item[0].status ? '已支付' : '未支付'" @click="toOrderDetail(item[0].orderSerialNumber)">
          <div v-for="item1 in item" :key="item1.goods.id">
            <router-link :to="'/goods-detail/'+item1.goods.id">
              <van-card
                :num="item1.amount"
                :price="item1.goods.sellPrice"
                :title="item1.goods.goodsName"
                :thumb="item1.goods.coverImg"
                :desc="item1.goods.brandsName + ' | ' + item1.goods.typeName"/>
              <!-- <div class="card-load-more van-hairline--bottom" v-if="goodsMap[item.id].length>1">查看全部{{goodsMap[item.id].length}}件商品</div> -->
            </router-link>
            <div class="bottom-control">
              <div class="panel-money">共{{item1.amount}}件商品 合计：
                <span class="fz12">￥</span>
                <span class="ui-c-red fz16">{{item1.totalMoney}}</span>
              </div>
              <div class="panel-actions" v-if="item1.status === 1">
              <router-link :to="`/goods-reputation/?id=${item1.goods.id}&goodsSerialNumber=${item1.goodsSerialNumber}`">
                <div class="panel-button panel-button-danger">评价</div>
              </router-link>
            </div>
          </div>
          </div>
          <!-- <div slot="footer" class="panel-actions" v-if="item.status === 0">
            <div class="panel-button" @click="onCancelOrder(item.id)">取消订单</div>
            <div class="panel-button panel-button-danger" @click="onPayOrder(item)">确认付款</div>
          </div> -->
          <div slot="footer" class="panel-actions" v-if="item[0].status === 0">
            <router-link :to="'/order-detail?id='+item[0].orderSerialNumber">
              <div class="panel-button panel-button-danger">去付款</div>
            </router-link>
            <div style="display:inline-block" @click.self="resetOrder(item[0].orderSerialNumber)">取消订单</div>
          </div>
          <!-- <div slot="footer" class="panel-actions" v-if="item[0].status === 1">
            <router-link :to="'/goods-detail/'+item[0].goods.id">
              <div class="panel-button panel-button-danger">评价</div>
            </router-link>
          </div> -->
        </van-panel>
      </div>
    </van-list>
  </div>
</template>

<script>
import { debounce } from '@/common/util'
import { mapState } from 'vuex'

export default {
  data() {
    return {
      tabs: [
        { name: '全部', status: '' }
      ],
      active: 0,
      goodsMap: {},
      list: [],
      page: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      finishedTxt: '没有更多了'
    }
  },
  computed: {
    ...mapState(['user'])
  },
  created() {
    // const status = this.$route.query.status === undefined ? '' : this.$route.query.status
    // this.active = this.tabs.findIndex(item => item.status === status)
  },
  methods: {
    onListLoad() {
      this.getOrderList()
    },
    onClick: debounce(function(index) {
      this.loading = true
      this.finished = false
      this.getOrderList()
    }, 1000),
    /**
     * 获取订单列表
     */
    getOrderList() {
      const query = {
        userId: this.user.id
      }
      this.$api.cart.orderByUser(query).then(res => {
        if (res.code === 200) {
          this.list = res.data
          this.loading = false
          this.finished = true
        }
      })
    },
    /**
     * 取消订单
     */
    resetOrder (id) {
      let params = {
        orderSerialNumber: id
      }
      this.$api.cart.deleteOrder(params).then(res => {
        if (res.code === 200) {
          this.$toast({
            type: 'success',
            message: '删除成功~'
          })
          this.getOrderList()
        }
      })
    },
    /**
     * 去订单详情
     */
    toOrderDetail(id) {
      this.$router.push({
        path: '/order-detail',
        query: {
          id: id
        }
      })
    },
    /**
     * 取消订单
     */
    onCancelOrder(id) {
      this.$dialog.confirm({
        // title: '提示',
        message: '订单还未付款,确定要取消吗?',
        cancelButtonText: '在考虑下',
        confirmButtonText: '取消订单'
      }).then(() => {
        this.$toast.loading({
          mask: true,
          message: '加载中...',
          duration: 0
        })
        this.$toast({ message: '取消订单成功', duration: 1500 })
        this.list.splice(this.list.findIndex(item => item.id === id), 1)
      }).catch(() => {
      })
    },
    /**
     * 确认付款
     */
    onPayOrder(data) {
      const orderId = data.id
      const amountReal = data.amountReal
      this.$toast.loading({
        mask: true,
        message: '支付提交中',
        duration: 0
      })
      this.$toast.clear()
      this.$dialog.confirm({
        title: '支付成功',
        message: `实付￥${amountReal}`,
        cancelButtonText: '返回首页',
        confirmButtonText: '查看订单'
      }).then(() => {
        this.$router.replace({ path: '/order-detail', query: { id: orderId }})
      }).catch(() => {
        this.$router.replace({ path: '/home' })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list-item {
  margin-bottom: 10px;
  .van-cell__title{
    white-space: nowrap;
    width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .bottom-control{
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-around;
    align-items: center;
  }
}
.card-load-more{
  font-size: 14px;
  color:#f44;
  padding:5px;
  line-height:28px;
  text-align:center;
}
.panel {
  .van-panel__header-value {
    flex: none;
  }
  &-money {
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    text-align: right;
  }
  &-actions {
    text-align: right;
  }
  &-button {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    padding: 4px 12px;
    border-radius: 20px;
    color: #666;
    border: 1px solid #b9b9b9;
  }
  &-button-danger {
    color: #f44;
    border: 1px solid #f44;
  }
  &-button::active {
    opacity: 0.8;
  }
}
.no-data .van-loading__spinner {
  display: none;
}
</style>

